﻿<div ng-controller="QualitativePerformanceController as esgQualitative">
    <div class="left-content">
        <div class="sidebar-table-left no-border">
            <div class="orange-number-bubble border{{ esgQualitative.getEsgControversyIndicatorsLastCategory() }}">
                <span ng-hide="esgQualitative.getEsgControversyIndicatorsLastCategory() == 0">{{ esgQualitative.getEsgControversyIndicatorsLastCategory() }}</span>
            </div>
        </div>
        <div class="sidebar-table-right no-border">
            <div class="title-black-border">Highest Controversy Level</div>
            <ul class="esg-ratings_black">
                <li ng-repeat="indicator in esgQualitative.getEsgControversyIndicatorsInLastCategory()">
                    <b>{{ indicator.name }}</b><br />
                    {{ indicator.eventIndicatorName }}
                    <ul ng-repeat="event in indicator.events">
                        {{event.eventName}}
                    </ul>
                </li>
            </ul>
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div class="right-content">
        <div class="bubble-container">
            <div class="orange-bubble-border border1">1</div>
            <div class="orange-bubble-text">
                <div class="title-black-border">
                    Low
                </div>
                <ul class="esg-ratings_black">
                    <li ng-if="!esgQualitative.hasEsgControversyIndicatorsInCategory(1)">None</li>
                    <li ng-repeat="indicator in esgQualitative.getEsgControversyIndicatorsByCategory(1)">
                        <b>{{ indicator.name }}</b><br />
                        <ul ng-repeat="event in indicator.events">
                            {{event.eventName}}
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="bubble-container">
            <div class="orange-bubble-border border2">2</div>
            <div class="orange-bubble-text">
                <div class="title-black-border">
                    Moderate
                </div>
                <ul class="esg-ratings_black">
                    <li ng-if="!esgQualitative.hasEsgControversyIndicatorsInCategory(2)">None</li>
                    <li ng-repeat="indicator in esgQualitative.getEsgControversyIndicatorsByCategory(2)">
                        <b>{{ indicator.name }}</b><br />
                        <ul ng-repeat="event in indicator.events">
                            {{event.eventName}}
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="bubble-container">
            <div class="orange-bubble-border border3">3</div>
            <div class="orange-bubble-text">
                <div class="title-black-border">
                    Significant
                </div>
                <ul class="esg-ratings_black">
                    <li ng-if="!esgQualitative.hasEsgControversyIndicatorsInCategory(3)">None</li>
                    <li ng-repeat="indicator in esgQualitative.getEsgControversyIndicatorsByCategory(3)">
                        <b>{{ indicator.name }}</b><br />
                        <ul ng-repeat="event in indicator.events">
                            {{event.eventName}}
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="bubble-container">
            <div class="orange-bubble-border border4">4</div>
            <div class="orange-bubble-text">
                <div class="title-black-border">
                    High
                </div>
                <ul class="esg-ratings_black">
                    <li ng-if="!esgQualitative.hasEsgControversyIndicatorsInCategory(4)">None</li>
                    <li ng-repeat="indicator in esgQualitative.getEsgControversyIndicatorsByCategory(4)">
                        <b>{{ indicator.name }}</b><br />
                        <ul ng-repeat="event in indicator.events">
                            {{event.eventName}}
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="bubble-container">
            <div class="orange-bubble-border border5">5</div>
            <div class="orange-bubble-text">
                <div class="title-black-border">
                    Severe
                </div>
                <ul class="esg-ratings_black">
                    <li ng-if="!esgQualitative.hasEsgControversyIndicatorsInCategory(5)">None</li>
                    <li ng-repeat="indicator in esgQualitative.getEsgControversyIndicatorsByCategory(5)">
                        <b>{{ indicator.name }}</b><br />
                        <ul ng-repeat="event in indicator.events">
                            {{event.eventName}}
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div class="clear">&nbsp;</div>
</div>